<template>
  <div>
    <h1>LOGO</h1>
    <div class="home">
      <div><circle-loading /></div>
      <div><bubble-loading /></div>
      <div><teacup-loading /></div>
      <div><play-button /></div>
      <div><floating-button /></div>
      <div><progress-bar /></div>
      <div><badge /></div>
      <div><heart /></div>
      <div><land-mark /></div>
      <div><mail /></div>
      <div><calendar /></div>
      <div><vue /></div>
    </div>
  </div>




</template>

<script>
  import CircleLoading from '../components/logo/CircleLoading.vue'
  import BubbleLoading from '../components/logo/BubbleLoading.vue'
  import TeacupLoading from '../components/logo/TeacupLoading.vue'
  import PlayButton from '../components/logo/PlayButton.vue'
  import FloatingButton from '../components/logo/FloatingButton.vue'
  import ProgressBar from '../components/logo/ProgressBar.vue'
  import Badge from '../components/logo/Badge.vue'
  import Heart from '../components/logo/Heart.vue'
  import LandMark from '../components/logo/LandMark.vue'
  import Mail from '../components/logo/Mail.vue'
  import Calendar from '../components/logo/Calendar.vue'
import Vue from "../components/logo/Vue.vue"
    export default {
      name: "Logo",
      components:{
        CircleLoading,
        BubbleLoading,
        TeacupLoading,
        PlayButton,
        FloatingButton,
        ProgressBar,
        Badge,
        Heart,
        LandMark,
        Mail,
        Calendar,
        Vue
      }
    }
</script>

<style scoped>
  .home {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 100vh;
    justify-items: center;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
  }
  .home > div {
    transform: scale(1.5);
  }

</style>
